<template>
  <div class="dashboard-editor-container">
    <div
      ref="selectdiv"
      class="selectclass"
      :style="{
        position: position,
        top: top,
        'line-height': lineheight + 'px',
        'margin-left': mleft + 'rem',
        width: wd,
        'background-color': backcolor,
      }"
    >
      <el-select
        v-if="logincpnid == sy"
        v-model="form.cpnid"
        style="margin-left: 44px"
        :style="{ float: 'left' }"
        placeholder="所有"
        clearable
        filterable
        class="filter-item"
        @change="CpnselectFn($event)"
      >
        <el-option
          v-for="item in cpnoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>

      <el-select
        v-model="form.paychannelid"
        :style="{ float: 'left' }"
        clearable
        filterable
        class="filter-item"
        placeholder="所有"
        @change="paychanelSelectFn($event)"
      >
        <el-option
          v-for="item in paytychanneloptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span v-html="item.label" />
        </el-option>
      </el-select>
      <el-col :span="3" style="fl" :style="{ float: 'left' }">
        <el-date-picker
          v-model="form.StDt"
          type="date"
          placeholder="请选择开始日期"
          style="width: 100%"
          format="yyyy-MM-dd"
          @change="StDtChange($event)"
        />
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="form.EdDt"
          type="date"
          placeholder="请选择结束日期"
          style="width: 100%"
          format="yyyy-MM-dd"
          @change="EdDtChange($event)"
        />
      </el-col>
    </div>
    <div style="height:30px,background-color:red" class="block" />

    <!-- 表格 -->

    <!-- <div class="table-container">
      <datatable
        :cpn-i-d="form.cpnid"
        :chnanel-id="form.paychannelid"
        :st-dt="form.StDt"
        :ed-dt="form.EdDt"
      />
    </div> -->

    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        style="padding-left: 0px !important; padding-right: 10px"
      >
        <div class="leftbox">
          <!-- <div class="title">
            <h3>对账异常数</h3>

          </div> -->
          <!-- 对账异常数 -->
          <unusual
            :select-type="unusualcount"
            :cpn-i-d="form.cpnid"
            :chnanel-id="form.paychannelid"
            :refsh="form.linechardayrefresh"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" style="padding-right: 0px !important">
        <div class="rightbox">
          <!-- 累计未处理异常 -->
          <unhandle :cpn-i-d="form.cpnid" />
        </div>
      </el-col>
    </el-row>

    <el-row class="monitoring-box">
      <!-- <div class="title">
        <h3>实时在线前置机检测</h3>

      </div> -->
      <!-- 前置机在线检测 -->

      <monitoring :cpn-i-d="form.cpnid" />
    </el-row>
  </div>
</template>

<script>
import datatable from './components/datatable.vue' // 表格
import unhandle from './components/unhandle.vue' // 未处理异常图表
import unusual from './components/unusual.vue' // 异常数表表
import monitoring from './components/monitoring.vue' // 前置机数量在线监控
// import PyOnlineChart from '@/views/dashboard/components/PyOnlineChart' // 前置机在线监测
import { SelectAjax } from '@/api/common'
import sessionStorage from '@/api/Storage'

export default {
  components: {
    datatable,
    unusual,
    unhandle,
    monitoring
    // PyOnlineChart
  },
  data() {
    return {
      radio1: 1,
      sy: 'system',
      logincpnid: '',
      position: 'static',
      top: 0,
      initTop: 0,
      lineheight: 0,
      mleft: 1,
      wd: 'auto',
      backcolor: 'transparent',
      cpnoptions: [],
      paytychanneloptions: [],
      form: {
        act: '',
        cpnid: '',
        paytypeid: '',
        paychannelid: '',
        Account: '',
        AccountName: '',
        IsEmrgncy: false,
        IsRc: false,
        payType: ['Micropay'],
        StDt: '',
        EdDt: '',
        refsh: '',
        lineChartMoney: '',
        linechardayrefresh: '',
        unprocessedrefresh: '',
        pierefresh: '',
        charttimerefresh: ''
      },
      dayrecselectcount: 1,
      dayrectabber: [
        {
          title: '月',
          selected: 0
        },
        {
          title: '日',
          selected: 1
        }
      ],
      unusualcount: 1,
      unusualSwicth: [
        {
          title: '月',
          selected: 0
        },
        {
          title: '日',
          selected: 1
        }
      ],
      onlinecount: 0,
      onlineSwicth: [
        {
          title: '月',
          selected: 0
        },
        {
          title: '日',
          selected: 1
        }
      ]
    }
  },
  created() {
    var userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    // this.title = userinfo.cpnName + '支付驾驶舱'
    this.form.cpnid = userinfo.cpnId
    this.logincpnid = userinfo.cpnId
    backstage.GeCpntListItems(this)
    backstage.GetPyChannelSelectListItems(this)
  },
  mounted() {
    // this.initTop = this.$refs.selectdiv.getBoundingClientRect().top  //原本的数据
    this.initTop = this.$refs.selectdiv.offsetTop // 现在修改为元素到顶部的位置
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScrollStart)
  },
  methods: {
    StDtChange(e) {
      this.form.StDt = e == null ? '' : e.toLocaleDateString()
    },
    EdDtChange(e) {
      this.form.EdDt = e == null ? '' : e.toLocaleDateString()
    },
    CpnselectFn(e) {
      this.form.cpnid = e
      backstage.GetPyChannelSelectListItems(this)
    },
    paychanelSelectFn(e) {
      this.form.paychannelid = e
    },
    dayrectabChange(data) {
      var that = this
      that.dayrecselectcount = data.currentTarget.dataset.select
      console.log(that.dayrecselectcount)
    },
    // 交易额按钮切换
    unusualChange(data) {
      var that = this
      that.unusualcount = data.currentTarget.dataset.select
      console.log(that.unusualcount)
    },
    // 在线检测按钮
    onlineChange(data) {
      var that = this
      that.onlinecount = data.currentTarget.dataset.select
      console.log(that.onlinecount)
    },
    handleScrollStart() {
      // 滚动时判断距离顶部的距离小于0的话就固定搜索框
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop - 20 - this.initTop >= 0) {
        this.position = 'fixed'
        this.top = 0
        this.lineheight = 80
        this.mleft = -1.5
        this.wd = '100%'
        this.backcolor = '#ffffff'
      } else {
        this.position = 'static'
        this.top = this.initTop
        this.lineheight = 0
        this.mleft = 1
        this.wd = 'auto'
        this.backcolor = 'transparent'
      }
      console.log('scrollTop:' + scrollTop)
    }
  }
}
var backstage = {
  GeCpntListItems: function(thisobj) {
    SelectAjax(
      'GeCpntListItems',
      function(response) {
        // console.log(response);
        var body = response.data
        thisobj.cpnoptions = []
        body.data.forEach((element) => {
          thisobj.cpnoptions.push({
            value: element.value,
            label: element.text
          })
        })
      },
      function(error) {}
    )
  },
  GetPayTypeList: function(thisobj) {
    SelectAjax(
      'GetPayTypeList?val=',
      function(response) {
        var body = response.data
        thisobj.paytypeoptions = []
        body.data.forEach((element) => {
          thisobj.paytypeoptions.push({
            value: element.value,
            label: element.text
          })
        })
      },
      function(error) {}
    )
  },
  GetPyChannelSelectListItems: function(thisobj) {
    SelectAjax(
      'GetPyChannelSelectListItemsByCpnid?val=' + thisobj.form.cpnid + '',
      function(response) {
        var body = response.data
        thisobj.paytychanneloptions = []
        body.data.forEach((element) => {
          thisobj.paytychanneloptions.push({
            value: element.value,
            label: element.text
          })
        })
      },
      function(error) {}
    )
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 0, -4px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 1.3rem 1.3rem 0;
    margin-bottom: 2.6rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 1);
    padding: 1.5rem 1.5rem 0;
    margin-top: 5rem;
    position: relative;
  }
}
.block {
  height: 36px;
  // background-color: red;
  margin-bottom: 30px;
}
h2 {
  text-align: center;
  margin: 1rem 0rem 1rem 0rem;
  position: relative;
  top: -1.5rem;
  height: 2rem;
  font-size: 1.5rem;

  font-weight: 400;
  line-height: 2.5rem;
  color: rgba(48, 65, 86, 1);
  opacity: 1;
}
.h2title {
  font-size: 24px !important;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 41px;
  color: #304156;
  opacity: 1;
}
.selectclass {
  margin-left: 1em;
  padding-left: -4px !important;
  margin-bottom: 30px;
  // height: 30px;
  z-index: 999999;
  /***
 position: fixed;
  top: 0;
  left: -10;
 /
  z-index: 999999; /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
  -webkit-transition: 0.5s ease-in-out; /* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
  -moz-transition: 0.5s ease-in-out; /*这里为了兼容其他浏览器*/
  -o-transition: 0.5s ease-in-out;
}
.selectclass:hover {
  margin-left: 0px;
}
.table-container {
  position: static;
  margin-bottom: 30px;
}
.el-col {
  padding: 0px;
  margin: 0px;
}
.el-row {
  width: 100%;
  margin: 0px !important;
  padding: 0px !important;
}

.leftbox {
  height: 460px;
  padding-top: 10px;
  background: #ffffff;
  border-radius: 2px;
  // padding-right: 12px;
  margin-bottom: 30px;
  position: relative;
}

.rightbox {
  height: 460px;
  padding-top: 10px;
  margin-bottom: 30px;
  background: #ffffff;
  border-radius: 2px;
  // padding-left: 12px;
  position: relative;
}
.title {
  // padding-right: 16px;
  height: 50px;
  position: relative;
  // border-bottom: 1px solid #e8e8e8;
}
.title h3 {
  position: absolute;
  margin: 0px;
  padding: 0px;
  // width: 112px;
  height: 24px;
  font-size: 16px !important;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  left: 24px;
  top: 16px;
}

.box2 {
  // width: 210px; //原本比例
  width: 100px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #409eff;
  cursor: pointer;
}
.item3 {
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #409eff;
  font-size: 12px;
}
.active2 {
  border-radius: 20px;
  background: rgba(64, 158, 255, 1);
  color: white;
}
.el-radio-group {
  position: absolute;
  right: 56px;
  top: 12px;
  height: 32px;
}
::v-deep.el-radio-button .el-radio-button__inner {
  height: 32px;
  font-size: 14px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  // line-height: 22px;
}
::v-deep.monitoring-box {
  height: 460px;
  padding-top: 10px !important;
  // padding-bottom: 10px;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 30px !important;
  position: relative;
}
</style>
